import React from 'react'
import {withRouter} from 'react-router-dom'
import './SteamerCard.css'
// icon
import FireIcon from '../../res/images/web/shared/fire.png'


const SteamerCard = props => {

    const {steamer,} = props
    const {name, title, hot, imgUrl,} = steamer

    // styles

    const imageContainerStyle = {
        background: `no-repeat 50% 50%/cover url(${imgUrl})`,
    }

    const appDownloadToast = (e) => {
        // alert('download')
        props.onClickShowModal(e)
    }

    return (
        <div
            className='steamer-card'
            // onClick={e => props.history.push(`./live/${steamer.id}`)}
            onClick={(e) => appDownloadToast(e)}
        >

            <div
                style={imageContainerStyle}
                className='steamer-card-img'
            >
                <div className='steamer-card-img-info'>
                    <p>{name}</p>
                    <p>
                        <img src={FireIcon} alt='' />{hot}
                    </p>
                </div>
            </div>
            <div
                className='steamer-card-title'
            >
                {title}
            </div>
        </div>
    )
}

export default withRouter(SteamerCard)


